<template>
  <div class="loginContainer">
    <div class="closeWrapper">
      <span class="iconfont iconicon-test" @click="$router.back()"></span>
      <div class="login" @click="$router.push('/login')">登录</div>
    </div>
    <div class="logoWrapper">
      <span class="iconfont iconnew"></span>
    </div>
    <van-form class="loginForm">
      <comField label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" type="number" :rule="ruleUsername" @valChanged="setUsername" />
      <comField label="昵称" placeholder="昵称" :rules="[{ required: true, message: '请填写昵称' }]" type="text" :rule="ruleNickname" @valChanged="setNickname" />
      <comField label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" type="text" :rule="rulePassword" @valChanged="setPassword" />
      <comButton @clicked="register" btnText="注册" />
    </van-form>
  </div>
</template>

<script>
import comField from '../components/comField.vue'
import comButton from '../components/comButton.vue'
export default {
  components: {
    comField,
    comButton
  },
  data() {
    return {
      username: '',
      nickname: '',
      password: '',
      ruleUsername: '^\\d{5,11}$',
      ruleNickname: '^\\d{5,11}$',
      rulePassword: '^.{3,9}$'
    }
  },
  methods: {
    setUsername(username) {
      this.username = username
    },
    setNickname(nickname) {
      this.nickname = nickname
    },
    setPassword(password) {
      this.password = password
    },
    register() {
      if (!this.username || !this.password || !this.nickname) {
        // this.$toast.fail('请输入完整信息')
        // 弹窗以后阻止继续操作, return
        return
      }
      this.$axios({
        url: '/register',
        method: 'post',
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      }).then(res => {
        // eslint-disable-next-line no-unused-vars
        const { message, data } = res.data
        // eslint-disable-next-line eqeqeq
        if (message == '注册成功') {
          this.$toast.success(message)
          // this.$router.push('/login')
        } else {
          this.$toast.fail(message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.closeWrapper {
  padding: 4.4444vw 4.4444vw;
  display: flex;
  align-items: center;
  .iconicon-test {
    font-size: 7.5vw;
    flex: 1;
  }
  .login {
    font-size: 3.8889vw;
    border: 1px solid #888;
    padding: 2.7778vw;
    border-radius: 2.7778vw;
  }
}
.logoWrapper {
  text-align: center;
  color: #d81e06;
  .iconnew {
    font-size: 35vw;
  }
}
</style>
